<template>
	<view class="content">
		<view class="top">
			<view class="go_back" @click="go_back">
				<image src="../../../static/img/back.png" mode=""></image>
			</view>
			<view class="dname">
				答题
			</view>
			
		</view>
		<view class="cent">
			<view class="question_num">
				<!-- src="../../static/img/questionnum.png" -->
				<image src="../../../static/img/problem_people.png" mode=""></image>
				<text>{{datat[num].id}}/10</text>
			</view>
			<view class="question">
				<text style="font-size: 20px;">{{datat[num].topic}}
				</text>
			</view>
			<view class="choice" style="min-height: 300rpx;">
				<radio-group @change="changeRadio">
					<view class="choiceA " :class="{active:isactive}">
						<label class="radio">
							<radio value="A" :checked="'A'==checked" />
							<view class="timu">{{datat[num].choiceA}}</view>
						</label>
					</view>
					<view class="choiceB" :class="{active:isactivse}">
						<label class="radio">
							<radio value="B" :checked="'B'===checked" />
							<view>{{datat[num].choiceB}}</view>
						</label>
					</view>
					<view class="choiceC" :class="{active:isactivse}">
						<label class="radio">
							<radio value="C" :checked="'C'===checked" />
							<view>{{datat[num].choiceC}}</view>
						</label>
					</view>
					<view class="choiceD" :class="{active:isactivse}">
						<label class="radio">
							<radio value="D" :checked="'D'===checked" />
							<view>{{datat[num].choiceD}}</view>
						</label>
					</view>
				</radio-group>
			</view>
			<view class="next" @click="to_next()">
				<!-- src="../../static/img/next_bordrer.png" -->
				<image src="../../../static/img/next_proble.png" mode=""></image>
			</view>
			<view :hidden="userFeedbackHidden" class="popup_content">
					<view class="people">
						<image src="../../../static/img/problem_people.png" mode=""></image>
					</view>
					<view class="true_problem" style="font-family: lsfamily;">
						<h3>恭喜你答对{{anssum}}题恭喜你答对</h3>
						<text>反诈骗的道路还有继续走下去哦！！！</text>
					</view>
					<view class="to_back" @click="to_back" >
						<image src="../../../static/img/wancheng.png" mode=""></image>
						</view>
			
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [],
				datat: [],
				num: 0,
				isactive: false,
				isactivse: false,
				anssum: 0,
				radioValue: "",
				checked: "",
				userFeedbackHidden: true
			}
		},
		onLoad: function(option) {
			let type = option.type;
			var that = this;
			// console.log(type);
			var data = require('../../../static/data/answer.json');
			that.datat = data["zhapian_answer"].filter(item => item.type == 3)[0]["content"];
		},
		mounted() {
			if (this.num == 0) {
				this.anssum = 0;
				
			}
		},
		methods: {
			xuanze(ans) {
				console.log(this.data[this.num].result);
			},
			changeRadio(e) {
				this.radioValue = e.detail.value;
				this.checked = e.detail.value;
			},
			to_next() {
				console.log("正确答案" + this.datat[this.num].result);
				console.log(this.num);
				if (this.num == 9) {
					// uni.showToast({
					// 	title: "恭喜您答对" + this.anssum + "题目"
					// })
					this.userFeedbackHidden = false;
				}
				if (this.num < 9) {
					if (this.radioValue == this.datat[this.num].result) {
						// uni.showToast({
						// 	title: "恭喜您答对"
						// })
						this.anssum++;
					}
					this.num++;
				}
				

				this.checked = "";
				this.radioValue = "";
			},
			to_back(){
				uni.switchTab({
					url:"../answer"
				})
			},
			go_back(){
				uni.switchTab({
					url:"../answer"
				})
			}
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		background-image: url(../../../static/img/background.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100% 100%;

	}
	
	.content {
		/* border:  solid 1px red; */
		/* width: 80%; */
		/* margin: auto; */
		/* padding-top: 50rpx; */
	}
	.top{
			/* border: #ACC3D4 solid 1px; */
		width: 750rpx;
		height: 50px;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: row;
		background-color:#CCE5ED ;
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.go_back{
		/* border: #ACC3D4 solid 1px; */
		width:25px;
		height: 25px;
		margin: 13px;
		
	}
	.go_back image{
		width: 100%;
		height: 100%;
	}
	.dname{
		width: 650rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		padding-right: 100rpx;
		box-sizing: border-box;
		font-size: 50rpx;
		font-weight: bolder;
		
		/* border: red solid 1px; */
	}
	.cent{
		width: 80%;
		margin: auto;
	}
	
	.question_num {
		/* border:  solid 1px red; */
		width: 200rpx;
		height: 80rpx;
		padding-right: 40rpx;
		box-sizing: border-box;
		background-color: #C0D3E1;
		border-radius: 40rpx;
		text-align: right;
		line-height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;


	}

	.question_num image {
		width: 50rpx;
		height: 80rpx;
		float: left !important;

	}


	.question {
		/* border:  solid 1px red; */
		/* width: 750rpx;	 */
		line-height: 50rpx;
		font-weight: 550;
		margin: 40rpx auto;
	}

	.choice {
		/* border: solid 1px red; */
		/* width: 350px; */
		/* height: 200px; */
		margin: 40rpx auto;
	}



	.choiceA,
	.choiceB,
	.choiceC,
	.choiceD {
		border: solid 3px #ACC3D4;
		border-radius: 20rpx;
		background-color: #cde1ef;
		margin-bottom: 20rpx;
		/* background-color: aqua; */
	}


	.radio radio {
		/* border:black solid 1px; */
		float: left;
	}


	.next {
		/* border: solid 1px red; */
		width: 300rpx;
		height: 100rpx;
		margin: auto;
	}

	.next image {
		width: 100%;
		height: 100%;

	}

	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color:rgba(0,0,0,0.5);
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.popup_content {
		height: 600rpx;
		width: 600rpx;
		background-color: aliceblue;
		border: #ACC3D4 solid 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		position: fixed;
		top: 30%;
		left: 10%;
		z-index: 1002;
		/* overflow: auto; */
	}
	
	
	.people{
		/* border: #ACC3D4 solid 1px; */
		width: 250rpx;
		height: 400rpx;
		float: left;
	}
	.people image{
		width: 100%;
		height: 100%;
	}
	.true_problem{
		width: 280rpx;
		height: 400rpx;
		padding: 30rpx;
		box-sizing: border-box;
		/* background-color: aqua; */
		float: right;
	}
	.to_back{
		width: 300rpx;
		height: 100rpx;
		margin:450rpx auto;
		
	}
	.to_back image{
		width: 100%;
		height: 100%;
	}
/* 	@font-face {
			font-family: lsfamily;
			src: url("@/static/SIMLI.TTF");
		 
	} */
</style>
